<template>
  <!-- 打包订货 -->
  <div>
    <TopFilter ref="topFilter" :list="topFilterList" :cols="3" :collapse="false" @filterChange="hanldeSearch"></TopFilter>
    <FilterTable
      ref="table"
      columnsRef="partPartPurchasePurchaseOrderCreatePackingOrder"
      :dataSource="dataSorce"
      :isMemoryPagination="true"
      :columns="tableColumns"
      :onRowSelectChange="handleTableSelectChange"
      :onColumnsChange="columns => (this.tableColumns = columns)"
    ></FilterTable>
    <div class="bottomBtnWrap">
      <el-button @click="handleCancle">取消</el-button>
      <el-button type="primary" @click="handleConfirm">确定</el-button>
    </div>
  </div>
</template>

<script>
import { queryPackingParts } from '@/api/part/partPurchase/purchaseOrder';

export default {
  props: {
    partList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      topFilterList: this.createTopFilterList(),
      tableColumns: this.createTableColumns(),
      fetchapi: queryPackingParts,
      dataSorce: [], // table数据源
      fetchParams: { xhrAbort: true },
      selectedRowData: [] // 选中的table列表数据
    };
  },
  mounted() {
    if (this.partList.length) {
      this.dataSorce = this.partList;
    } else {
      this.queryTableData();
    }
  },

  methods: {
    createTopFilterList() {
      return [
        {
          type: 'INPUT',
          label: '配件代码',
          fieldName: 'partNo'
        }
      ];
    },
    createTableColumns() {
      return [
        {
          title: '原配件代码',
          dataIndex: 'oldPartNo',
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '原配件名称',
          dataIndex: 'oldPartName',
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '订购数量',
          dataIndex: 'quan1',
          filter: true,
          filterType: 'number',
          showOverflowTooltip: true
        },
        {
          title: '打包配件代码',
          dataIndex: 'partNo',
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '打包配件名称',
          dataIndex: 'partName',
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '打包数量',
          dataIndex: 'quan2',
          filter: true,
          filterType: 'number',
          showOverflowTooltip: true
        },
        {
          title: '打包类型',
          dataIndex: 'type',
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        },
        {
          title: '备注信息',
          dataIndex: 'remark',
          filter: true,
          filterType: 'input',
          showOverflowTooltip: true
        }
      ];
    },
    async queryTableData() {
      let formData = await this.$refs.topFilter.GET_FORM_DATA();
      this.$refs.table.START_LOADING();
      let res = await queryPackingParts({
        ...formData[1]
      });
      this.$refs.table.STOP_LOADING();
      if (res.resultCode == 200) {
        this.dataSorce = res.data;
      }
    },
    // table选择变化
    handleTableSelectChange(e) {
      this.selectedRowData = e;
    },
    // 点击搜索按钮
    hanldeSearch(e) {
      this.queryTableData();
    },
    // 点击确定
    handleConfirm() {
      if (this.selectedRowData.length) {
        // 依赖打包 组装打包
        let groupPackgParts = [],
          relyOnParts = [];
        this.selectedRowData.map(item => {
          if (item.type == '依赖打包') {
            relyOnParts.push(item);
          } else {
            groupPackgParts.push(item);
          }
        });
        let oldIds = this.selectedRowData.map(item => item.oldPartNo);
        oldIds = [...new Set(oldIds)];
        this.$emit('onConfirm', {
          oldIds,
          groupPackgParts,
          relyOnParts
        });
        this.handleCancle();
      }
    },
    // 点击取消
    handleCancle() {
      this.$emit('close');
    }
  }
};
</script>
<style scoped>
.bottomBtnWrap {
  position: absolute;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 9;
  border-top: 1px solid rgb(233, 233, 233);
  padding: 10px 20px;
  background: rgb(255, 255, 255);
  text-align: right;
}
</style>
